<template>
  <BaseContent>
    <div class="row">
      <div class="col-3">
        <UserProfileInfo :user="user" @follow="follow" @unfollow="unfollow"/>
        <UserProfileWrite @send_post="send_post" />
      </div>
      <div class="col-9">
        <UserProfilePosts :posts="posts" />
      </div>
    </div>
  </BaseContent>
</template>

<script>
import BaseContent from '@/components/BaseContent.vue';
import UserProfileInfo from "@/components/UserProfile/UserProfileInfo.vue"
import UserProfilePosts from "@/components/UserProfile/UserProfilePosts.vue"
import UserProfileWrite from "@/components/UserProfile/UserProfileWrite.vue"
import { reactive } from 'vue';


export default {
  name: 'UserProfileView',
  components: {
    BaseContent,
    UserProfileInfo,
    UserProfilePosts,
    UserProfileWrite,
  },
  setup() {
    const user = reactive({
      id: 1,
      first_name: "Chen",
      last_name: "Bai",
      followers: 0,
      is_followed: false,
      
    })

    const posts = reactive({
      values: [
        {id: 1, userId: 1, content: "hello vue!"},
        {id: 2, userId: 1, content: "hello baichen!"},
        {id: 3, userId: 1, content: "hello baichen&vue!"},
      ],
      posts_count: 3
    }
    )

    const follow = () => {
      if (user.is_followed) return;
      user.followers++;
      user.is_followed = true;
    }

    const unfollow = () => {
      if (!user.is_followed) return;
      user.followers--;
      user.is_followed = false;
    }

    const send_post = (content) => {
      if (!content.length) return;
      posts.posts_count++;
      posts.values.unshift({
        id: posts.posts_count,
        userId: 1,
        content: content
      })

    }

    return {
      user,
      follow,
      unfollow,
      posts,
      send_post
    };
  }
}
</script>
